I am using font picker in my project like this.

<FontPicker
                          apiKey={process.env.REACT_APP_GOOGLE_API_KEY}
                          activeFontFamily={activeFontFamilyMobile}
                          onChange={(nextFont) =>
                            setActiveFontFamilyMobile(nextFont.family)
                          }
                        />

The already saved font in stored in the backend, which I am fetching and setting up like this in use Effect:

            setActiveFontFamilyMobile(response.data.font_family);

and by default, the state is like this:

  const [activeFontFamilyMobile, setActiveFontFamilyMobile] = React.useState("Raleway");

So the problem is that when the page loads for the first time, saved font_family comes from the backend and is stored in activeFontFamilyMobile. And in the parameters of fontPicker, it should be displayed by activeFontFamily={activeFontFamilyMobile}. But it gives error like this: Error

But if I make some changes in the code and cause a re-render, it starts working. So its not working when the pages loads first time. What might be the issue?